<template>
  <view class="box">

    <view v-for="el in offList"
          :key="el.id"
          class="box_offer text-center">
      <view class="kong_border"></view>
      <block>
        <image class="image_ph"
               :src="$serverIp+el.images[0]"
               mode=""></image>
      </block>
      <view class="text_ofer flexs2">
        <view class="ofer_left">{{el.title}}</view>
        <navigator :url="'/pages/offercenter/offercenter?id='+el.id"
                   class="offer_right">立即查看</navigator>
      </view>
    </view>
    <view v-if="offList.length<1"
          class="nothing text-center">
      <image src="../../static/image/offerxq_img_k@2x.png"
             mode=""></image>
      <view class="">
        暂无信息
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      offList: []
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    async getList() {
      let { data } = await this.$http.post('/Offer/index', { page: 1, limit: 100 })
      this.offList = data.data
    }
  }
}
</script>

<style lang="scss">
/* 头部区域 */
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  /* // .right {
  //   position: absolute;
  //   top: 14rpx;
  //   right: 14rpx;
  //   width: 60rpx;
  //   height: 60rpx;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // } */

  .title {
    width: 750rpx;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.box {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
.box_offer {
  padding: 0 30rpx;
}
.kong_border {
  width: 100%;
  height: 20rpx;
  background-color: #f5f5f5;
}
.image_ph {
  width: 690rpx;
  height: 302rpx;
  border-radius: 12rpx;
  border-radius: 10rpx 10rpx 0rpx 0rpx;
  // box-sizing: border-box;
}
.text_ofer {
  width: 690rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #ffffff;
  border-radius: 0px 0px 10rpx 10rpx;
  // margin: 0 auto;
  margin-top: -6rpx;
  padding: 0 20rpx;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.ofer_left {
  font-size: 26rpx;
  color: #333333;
}
.offer_right {
  margin-top: 12rpx;
  color: #333333;
  width: 115rpx;
  height: 45rpx;
  line-height: 45rpx;
  background: #ffdd47;
  border-radius: 6rpx;
  font-size: 22rpx;
  box-sizing: border-box;
}
.nothing image {
  width: 354rpx;
  height: 253rpx;
}
.nothing {
  color: #666666;
  font-size: 26rpx;
  margin-top: 200rpx;
}
</style>

